import React from 'react';
import { Layout, Menu } from 'antd';
import { NavLink } from 'react-router-dom'
import {connect } from 'react-redux'
const { Sider } = Layout;
const { SubMenu } = Menu
class Nav extends React.Component {
  state = {
    collapsed: false,
    selectedKeys: ['/org/userlist']
  };
  initSelectkeys = ()=>{
    console.log(window.location.hash)
    this.setState({
      selectedKeys:window.location.hash.slice(1)
    })
  }
  // componentDidMount(){
  //   this.setState({
  //     selectedKeys:window.location.hash.slice(1)
  //   })
  //   window.addEventListener('hashchange',this.initSelectkeys)
  //   //原生  popstate   不能监听history。pushStat和 replaceState
  // }
  // componentWillUnmount(){
  //   window.removeEventListener('hashchange',this.initSelectkeys)
  // }
  
  render() {
    return <Sider className='' style={{ width: 256 }}>
      <Menu
        defaultOpenKeys={['sub1']}
        mode="inline"
        theme="dark"
        selectedKeys={[this.props.path]}
      >
        <SubMenu key="sub1" title="员工管理">
          {/* <NavLink to='/userList'><Menu.Item key="1">员工列表</Menu.Item></NavLink>
          <NavLink to='/adduser'><Menu.Item key="1">新增员工</Menu.Item></NavLink>
          ---------------------------------- */}
          <Menu.Item key="/org/userlist">
            {/* 这种写法 需要借助 selectedKeys + redux*/}
            <NavLink to='/org/userlist'>员工列表</NavLink>
          </Menu.Item>
          <Menu.Item key="/org/adduser">
            <NavLink to='/org/adduser'>新增员工</NavLink>
          </Menu.Item>
        </SubMenu>
        <SubMenu key="sub2" title="部门管理">
          <Menu.Item key="5">部门列表</Menu.Item>
          <Menu.Item key="6">新增部门</Menu.Item>

        </SubMenu>
        <SubMenu key="sub3" title="职务管理">
          <Menu.Item key="7">职务列表</Menu.Item>
          <Menu.Item key="8">新增职务</Menu.Item>

        </SubMenu>
      </Menu>
    </Sider>;
  }
}
Nav = connect((state)=>{
  return {
    // 对应的就是我们页面的当前路径
    path:state.route.path
  }
})(Nav)
export default Nav